<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <title>react</title>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div class="test"></div>
    <div class="test2"></div>

    <!-- js按顺序引入 -->
    <!-- 引入react核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>

    <!-- 引入react-dom,用于操作dom -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>

    <!-- 引入babel,用于将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <!-- 引入prop-types,用于对组件标签进行限制 -->
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        // 1.创建类式组件 组件名首字母必须大写
        class Count extends React.Component{   
            //-------------------第一 组件最先调用 constructor可省略
            constructor(props){            
                super(props)
                console.log('第一，组件调用constructor');
                this.state = {count:0}// 在constructor内声明state要有this
            }
        //    state = {count:0} // 在constructor外声明state没有this
                    // --------------------第二
         componentWillMount(){
            console.log('第二，组件将要挂载生命周期');
         }
         // 数字++
           add= ()=>{
                this.setState({count:this.state.count+1})
           }
           // 销毁组件
           deth=()=>{
            ReactDOM.unmountComponentAtNode( document.querySelector(".test"))
           }
           // 强制更新
           forceadd = ()=>{
            this.forceUpdate()
           }
            render(){// ---------------------第三
                console.log('第三，组件调用render');
                return (
                    <div>
                        <div >当前数值{this.state.count}</div>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.deth}>销毁组件</button>
                        <button onClick={this.forceadd}>强制更新</button>
                        </div>
                    )
            }
            // 第四
            componentDidMount(){
            console.log('第四，组件挂载完成的生命周期');
            }
            // 第五
            componentWillUnmount(){
                console.log('第五，组件将要卸载的生命周期');
            }

            // 当调用this.setState()之后让组件是否更新的钩子 ,不写默认返回true
            shouldComponentUpdate(){
                console.log('当调用setState()之后让组件是否更新的钩子');
                return true
            }
            // 调用强制更新this.forceUpdate()后会执行这个生命周期 组件将要更新的生命周期
            componentWillUpdate(){
            console.log('组件将要更新的生命周期');
            }
            // 组件更新完毕的生命周期
            componentDidUpdate(){
                console.log('组件更新完毕的生命周期');
            }

        }
 
      // 2.渲染虚拟Dom 
      ReactDOM.render(<Count/>, document.querySelector(".test"));
    
    
// -------------------------------父子组件生命周期----------------------------------

    // 父组件
    class A extends React.Component{
        state = {
            carName:'奔驰'
        }
        changeCar = ()=>{
            this.setState({carName:'奥迪'})
        }
        render(){
            return (
                <div>
                    <div>{'A(父组件)'}</div>
                    <button onClick={this.changeCar}>切换车型</button>
                    <B carName={this.state.carName} />
                    
                </div>
            )
        }
    }
// 子组件
    class B extends React.Component{
        // 组件将要接受参数的生命周期
   componentWillReceiveProps(props){
console.log('组件将要接收参数的生命周期',props);
   }
        render(){
               let carName =  this.props.carName
               // 使用props接收参数
            return (
            <div>
                <div>{'B(子组件)车辆是'+carName}</div>
    
                </div>
            )
        }
        // 当调用this.setState()之后让子组件是否更新的钩子 ,不写默认返回true ture之后才会调用render
        shouldComponentUpdate(){
                console.log('当调用setState()之后让子组件是否更新的钩子');
                return true
            }
            // 调用强制更新this.forceUpdate()后会执行这个生命周期 组件将要更新的生命周期
            componentWillUpdate(){
            console.log('子组件将要更新的生命周期');
            }
            // 组件更新完毕的生命周期
            componentDidUpdate(){
                console.log('子组件更新完毕的生命周期');
            }
    }
    ReactDOM.render(<A/>, document.querySelector(".test2"));
    
    </script>
</body>
<style>

</style>

</html>